1. Mapbox 的優勢：高品質地圖樣式

Mapbox 提供了多種精美的地圖樣式，例如街景、衛星圖和夜景模式，這些圖層可以在 Leaflet 中使用。這種整合允許開發者同時利用 Leaflet 的輕量框架和 Mapbox 的強大地圖樣式資源。

2. Leaflet 的優勢：插件和靈活的互動性

Leaflet 具有豐富的插件支持，如標記聚合 (Marker Clustering)、繪圖插件 (Leaflet.draw) 等，這些功能可以與 Mapbox 的底圖結合，提供更加互動的用戶體驗。

3. 具體實現步驟

步驟一：設置 Leaflet 地圖 使用 L.map() 初始化 Leaflet 地圖，設置地圖的中心和縮放級別。

var map = L.map('map').setView([25.034212623272115, 121.56356921931673],12);

步驟二：添加 Mapbox 圖磚層

使用 L.tileLayer() 添加 Mapbox 的圖磚層，將 Mapbox 的 URL 和 access token 作為參數。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your_mapbox_token'
}).addTo(map);

4. 整合 Mapbox API

除了使用 Mapbox 的圖層，你還可以整合其 API，例如路徑規劃、地理編碼等功能。在 Leaflet 中，你可以使用 fetch() 調用 Mapbox API，並將結果顯示在地圖上。

範例：使用 Mapbox Geocoding API 利用地理編碼將地址轉換為經緯度，並在 Leaflet 地圖上標記位置。

var geocodeUrl = 'https://api.mapbox.com/geocoding/v5/mapbox.places/台北101.json?access_token=your_mapbox_token';
fetch(geocodeUrl)
  .then(response => response.json())
  .then(data => {
    var coordinates = data.features[0].geometry.coordinates;
    L.marker([coordinates[1], coordinates[0]]).addTo(map)
      .bindPopup('台北 101')
      .openPopup();
  });

優勢

地圖樣式的靈活性：你可以使用 Mapbox 的高品質地圖樣式，並將其應用到 Leaflet 的地圖中，實現現代化的視覺效果。
互動性：使用 Leaflet 提供的豐富插件和互動功能，例如標記聚合 (Marker Clustering)、繪圖工具 (Leaflet.draw) 等，可以輕鬆實現更高級的地圖操作。
進階功能的整合：透過 Mapbox API，如 Geocoding、Directions API 等，讓地圖應用變得更加功能強大，尤其適合需要導航或地點查詢的應用場景。